<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="1" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							展商工作提示
						</div>
					</div>
					<div class="right-content-box">
						<div class="right-content-top-box">
							<div class="greet-box">
								<div class="greet-left-box">
									<div><span class="greet-name">欢迎&nbsp;{{ name }}</span></div>
									<div><span class="greet-help">{{ data.title }}</span></div>
								</div>
								<div class="greet-right-box">展位号：{{ data.booth_number }}</div>
							</div>
							<div class="time-address-box">
								<div><span>
										时间:{{ data.exhibitor_time }}
									</span></div>
								<div>
									<span>
										地点:{{ data.addres }}
									</span>
								</div>
							</div>
							<div class="reporting-box">
								<div class="reporting-top-box">
									<div class="reporting-top-title">
										展商报到时间
									</div>
									<div class="reporting-top-title">
										排爆演习
									</div>
									<div class="reporting-top-title">
										展商工作时间
									</div>
								</div>
								<div class="reporting-content-box">
									<div class="reporting-time-box">
										<div v-for="(item, index) in timeTable1" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="reporting-time-box">
										<div v-for="(item, index) in timeTable2" :key="index">
											{{ item }}
										</div>
									</div>
									<div class="reporting-time-box">
										<div v-for="(item, index) in timeTable3" :key="index">
											{{ item }}
										</div>
									</div>
								</div>
							</div>
							<div class="work-end-time-title">
								<span>*各项工作截止日期及完成状态如下：</span>
							</div>
							<div class="table-box">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="model_type_id" label="序号" width="80">
									</el-table-column>
									<el-table-column prop="title" label="工作内容" width="200">
									</el-table-column>
									<el-table-column prop="expire_time" label="截止时间" width="250">
									</el-table-column>
									<el-table-column prop="is_completed" label="完成状态">
										<template #default="scope">
											<div class="last-tr"
												v-if="scope.row.is_completed == 0 && scope.row.model_type_id != 3">
												未完成
											</div>
											<div class="status-success last-tr" v-else-if="scope.row.is_completed == 1">
												完成
											</div>
											<div v-else-if="scope.row.model_type_id == 3 && scope.row.is_completed == 0"
												class="last-tr">
												<a class="application-link"
													href="/#/exhibitors-certificate">点击提交</a><span
													class="application-span">（已提交<font class="application-number"
														v-html="scope.row.submit_number">
													</font>
													个，还可提交<font class="application-number"
														v-html="scope.row.remaining_to_submit">
													</font>个)</span>
											</div>
											<div v-else class="last-tr">
												<a class="notice-link" href="">请须知</a>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="contact-information-box">
								<div><span>{{ data.matters_needing_attention }}</span></div>
								<div><span>{{ data.contacts }}</span></div>
								<!-- 	<div><span>电话: <font class="contact-information-phone">{{ data.contact_phone }}
										</font></span></div> -->
								<div><span>邮箱: {{ data.e_mail }}</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		index
	} from "/src/api/index.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'IndexComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		props: {
			msg: String
		},
		data() {
			return {
				activeIndex: '1',
				name: '',
				tableData: [],
				data: {},
				timeTable1: [],
				timeTable2: [],
				timeTable3: [],
			};
		},
		methods: {
			index() {
				this.name = localStorage.getItem('exhibitor_name');
				index().then(data => {
					if (data.data.code == 200) {
						this.data = data.data.data;
						this.timeTable1 = this.data.contents[1];
						this.timeTable2 = this.data.contents[2];
						this.timeTable3 = this.data.contents[3];
						this.tableData = this.data.message_process_count_array;
						if (localStorage.getItem('exhibitor_update_pwd') == 0) {
							this.$confirm('当前为初始密码，是否要修改密码?', {
								confirmButtonText: '修改',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								localStorage.setItem('exhibitor_update_pwd', 1);
								this.$router.push("/reset-password")
							}).catch(() => {
								localStorage.setItem('exhibitor_update_pwd', 1);
							});
						} else {
							localStorage.setItem('exhibitor_update_pwd', 1);
						}
					} else {
						localStorage.clear('exhibitor_name');
						localStorage.clear('exhibitorr_token');
						localStorage.clear('exhibitor_contacts');
						localStorage.clear('exhibitor_update_pwd');
						this.$router.push("/login")
					}
				})
			}
		},
		mounted() {
			this.index();
		}
	}
</script>

<style scoped>
	.greet-right-box {
		font-size: 18px;
		margin-top: 20px;
	}

	.greet-left-box {
		width: 650px;
		float: left;
	}

	.right-content-box {
		width: 880px;
		margin: auto;
		border-radius: 4px;
		border: 1px solid #DDDFE4;
		margin-top: 15px;
		height: 770px;
	}

	.contact-information-phone {
		color: #4188EB;
	}

	.contact-information-box {
		text-align: left;
		color: #666666;
		letter-spacing: 0.5px;
		margin-top: 20px;
		line-height: 1.7;
		font-size: 16px;
	}

	.last-tr {
		text-align: left !important;
	}

	.notice-link {
		color: #FF8757
	}

	.application-number {
		color: #448EF1;
	}

	.status-success {
		color: #448EF1;
	}

	.application-span {
		color: #999999;
	}

	.application-link {
		color: #EB3C2C;
	}

	.table-box {
		margin-top: 20px;
	}

	.table-box div {
		text-align: center;
	}

	.el-table__header tr th {
		font-weight: bold;
		font-size: 15px;
		color: #333333;
		background-color: #F3F4F7 !important;
	}

	.work-end-time-title {
		text-align: left;
		color: #4188EB;
		font-weight: bold;
		font-size: 14px;
		margin-top: 20px;
	}

	.reporting-time-box {
		line-height: 2.2;
		padding-top: 10px;
	}

	.reporting-content-box {
		height: 110px;
		background: #EEF4FE;
		border-radius: 4px;
		overflow: hidden;
	}

	.reporting-time-box {
		height: 110px;
	}

	.reporting-time-box:nth-child(1) {
		width: 300px;
		float: left;
	}

	.reporting-time-box:nth-child(2) {
		width: 230px;
		float: left;
		border-left: 1px dotted;
		border-right: 1px dotted
	}

	.reporting-time-box:nth-child(3) {
		width: 315px;
		float: left;
	}

	.reporting-box {
		background: #EEF4FE;
		border-radius: 4px;
		color: #4188EB;
		font-size: 14px
	}

	.reporting-top-title:nth-child(1) {
		width: 300px;
	}

	.reporting-top-title:nth-child(2) {
		width: 230px;
	}

	.reporting-top-title:nth-child(3) {
		width: 315px;
	}

	.reporting-box {
		margin-top: 15px;
	}

	.reporting-top-title {
		float: left;
	}

	.reporting-top-box {
		width: 850px;
		background: #4188EB;
		border-radius: 4px 4px 0px 0px;
		color: #fff;
		font-size: 20px;
		overflow: hidden;
		height: 40px;
		line-height: 2;
	}

	.time-address-box {
		text-align: left;
		padding-left: 30px;
		line-height: 2;
		padding-top: 10px;
		color: #666666;
		font-size: 16px;
	}

	.greet-help {
		font-size: 14px;
		line-height: 1.8;
	}

	.greet-name {
		font-size: 22px;
		color: #4188EB;
		line-height: 36px;
		letter-spacing: 1px
	}

	.greet-box {
		overflow: hidden;
		background: #EEF4FE;
		border-radius: 4px;
		height: 70px;
		text-align: left;
		padding-left: 30px;
		color: #4188EB;
		padding-top: 10px;
	}

	.right-content-top-box {
		margin: auto;
		overflow: hidden;
		width: 850px;
		margin-top: 20px;
	}

	.right-vertical-title-box {
		width: 500px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 850px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>